<template>
    <view :class="['jk-card', { 'jk-card-full': full }]">
        <view class="jk-card-header">
            <view class="jk-card-header-content">
                <image class="jk-card-header-thumb" :src="thumb" mode="aspectFit" v-if="thumb" />
                <view class="jk-card-header-title">{{ title }}</view>
            </view>
            <view class="jk-card-header-extra" v-if="extra">{{ extra }}</view>
        </view>
        <view class="jk-class jk-card-body">
            <slot name="content"></slot>
        </view>
        <view class="jk-card-footer">
            <slot name="footer"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'Card',
        props: {
            full: {
                type: Boolean,
                default: false
            },
            thumb: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            extra: {
                type: String,
                default: ''
            }
        },
        data() {
            return {

            };
        }
    }
</script>

<style lang="scss">
    .jk-card {
        margin: 0 16px;
        font-size: 14px;
        overflow: hidden;
        position: relative;
        background: #fff;
        border: 1rpx solid #dddee1;
        border-radius: 5px;
        &-header {
            display: flex;
            padding: 6px 16px;
            align-items: center;
            &-content {
                flex: 1;
                text-align: left;
            }
            &-thumb {
                display: inline-block;
                width: 64px;
                height: 64px;
                position: relative;
                margin-left: auto;
                margin-right: auto;
                overflow: hidden;
                background-size: cover;
                vertical-align: middle;
            }
            
            &-title {
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                color: #1c2438;
            }
            &-extra {
                flex: 1;
                text-align: right;
                font-size: 14px;
                color: #80848f;
            }
        }
        
        &-body {
            position: relative;
            padding: 6px 16px;
            color: #495060;
            font-size: 14px;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 200%;
                height: 200%;
                transform: scale(.5);
                transform-origin: 0 0;
                pointer-events: none;
                box-sizing: border-box;
                border: 0 solid #e9eaec;
                border-top-width: 1px;
            }
        }
        .jk-card-footer {
            position: relative;
            padding: 6px 16px;
            color: #80848f;
            font-size: 12px;
        }
    }

    .jk-card-full {
        margin: 0;
        border-left: none;
        border-right: none;
        border-radius: 0
    }

    
</style>
